<template>
	<div>
		<h1 class='title' v-if='val.title'>{{val.title}}</h1>
		<div class='wrapper1'>
			<div class='x-content1' style='height:100%;'>
				<div v-for="(val,index) in val.content" :key='index'>
					<div>{{val}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
    import BScroll from 'better-scroll';
	export default {
		props:['val'],
		created(){
			this.val.content=JSON.parse(this.val.content).map(function(val){
				for(let key in val) return val[key];
			});
		},
		mounted(){
			let width=0;
			$('.x-content1').children().each(function(val){
				width+=$(this).outerWidth(true);
			});
			$('.x-content1').width(width);
			setTimeout(function(){
				new BScroll('.wrapper1',{click:true,scrollX:true});
			},500);
		},
	}
</script>

<style scoped>
	.title{
		padding:20px 0;
		font-size:17px;
		text-align: center;
	}
	.wrapper1{
		width:100%;
		height:50px;
		overflow:hidden;
		background: white;
	}
	.x-content1 > div{
		float: left;
		padding:3px 23px;
		height:100%;
		text-align: center;
		line-height: 50px;
	}
	.x-content1 > div:first-of-type > div{
		height:88%;
		border-bottom: 2px solid red;
		color:red;
	}

</style>